<template>
    <div class="remind-btns">
        <el-link 
        v-if="!show" 
        @click="add" 
        type="primary" 
        :underline="false"
        >
            <i 
            class="el-icon-circle-plus-outline" 
            v-czc="['首页', '点击按钮' , '添加待办提醒',0 ,'home-btn-addReminder']"
            >
                添加
            </i>
        </el-link>

        <template v-else>
            <el-link
            @click="submit" 
            type="primary" 
            :underline="false"
            >
                提交
            </el-link>

            <el-divider 
                direction="vertical"
            ></el-divider>

            <el-link
            @click="cancel" 
            type="info" 
            :underline="false"
            >
                取消
            </el-link>
        </template>
    </div>
</template>

<script>
export default {
    props: {
        reference: {
            type: String,
            default: '',
        },
    },
    data: () => ({
        referenceRef: null,
    }),
    computed: {
        show() {
            if (!this.referenceRef) {
                return false;
            }
            
            return this.referenceRef.showForm;
        },
    },
    methods: {
        add() {
            this.referenceRef.add();
        },
        submit(){
            this.referenceRef.submit();
        },
        cancel(){
            this.referenceRef.cancel();
        },
        bindReference() {
            if (!this.reference) {
                return;
            }

            if (this.referenceRef) {
                return;
            }

            var ref = null,
                parent = this;

            while (!ref && this.$parent.el !== document) {
                parent = parent.$parent;
                ref = parent.$refs[this.reference];
            }

            if (!ref) {
                console.error('未找到remind-btns的reference');

                return;
            }

            this.referenceRef = ref;
        },
    },
    mounted() {
        this.bindReference();
    },
}
</script>